<template>
  <el-dialog
    v-model="isVisible"
    class="skin-dialog inner-dialog"
    :align-center="true"
    width="324px"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <template #header>
      <span class="xz-confirm-title">
        <svg-icon :iconClass="appCfg.logo" />
        {{ appCfg.name }}
      </span>
    </template>
    <div class="flex-center column row-gap-10">
      <div class="flex-center center">
        <svg-icon iconClass="vip" className="fs24" />
        <div class="fs16 fb ml5" style="color: #a87700">{{ info.text }}</div>
      </div>
      <div class="text-center fs12 color-primary">{{ info.msg }}</div>
      <el-button type="primary" :style="{ 'margin-top': '34px' }" @click="handleBindUser">
        绑定账号
      </el-button>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { defineProps, defineEmits, computed } from "vue";
import { storeToRefs } from "pinia";
import { systemAppStore } from "@/stores/system";
import { runtimeAppStore } from '@/stores/runtime'
import { invokeAPi, invokeAsyncAPi } from "@/xz-fn";
const emit = defineEmits(["update:modelValue"]);
const _systemAppStore_ = systemAppStore();
const { appCfg } = storeToRefs(_systemAppStore_);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: "vip"
  }
});
const info = computed(() => {
  let text = "开通会员成功!";
  const msg = "为了更好地为您提供服务并确保您的会员权益，请及时绑定账号。";
  if(props.type ==='tsb'){
    text = "购买翻译币成功!"
  }else if(props.type ==='renewal'){
    text = "续费会员成功!"
  } else if (props.type === 'exchange') {
    text = "兑换奖励成功!"
  }
  return {
    text,
    msg
  }
});
const isVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const handleBindUser = () => {
  emit("update:modelValue", false);

  if (runtimeAppStore().bindUserWinID) {
    invokeAPi('fq_NotifyWebMessageEx', runtimeAppStore().bindUserWinID, {
      action: 'focus'
    })
    return
  }

  invokeAsyncAPi('jsMsg_GetWndID').then((id: any) => {
    invokeAsyncAPi('fq_CreateWindow', {
      url: import.meta.env.VITE_APP_USERCENTER_ORIGIN + '/bind-user-page',
      local_res:  false,
      size: {
        cx: 278,
        cy: 332
      },
      parent_wnd: id,
      show_type: false,
      payload: JSON.stringify({
        mainID: id
      })
    }).then(res => {
      runtimeAppStore().setBindUserWinID(res as number)
    })
  })
}
</script>
<style lang="scss" scoped>
.qr-img {
  display: block;
  width: 150px;
  height: 150px;
  margin: 20px auto;
}
</style>
